<template>
    <div class="tabBatr_item" @click="clickTabBar" :class="isActive">
        <slot name="tabBar_con"></slot>     
    </div>
</template>

<script>
export default {
    name: 'TabBar',
    props:{
        // tabBar跳转路径
        path:{
            type:String,
            default:'/home',//默认值
        }
    },
    methods:{
        // tabBar点击事件-进行路由跳转
        clickTabBar(){
            // replace()不能后退，没有历史记录
            this.$router.replace(this.path)
            // push可以后退
            // this.$router.push(this.path)
        }
    },
    computed:{
        isActive(){
            return this.$route.path==this.path?'active':''
        }
    }
}
</script>

<style lang="less" scoped>
.tabBatr_item{
    display: flex;
    flex-direction: column;
    font-size: .30rem;
    align-items: center;
    color: #999;
    .iconfont{
        font-size: .35rem;
    }
    
}
// 高亮显示
.active{
    color: #31c27c;
}
</style>